<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<body>
    <h3>构造函数和实例对象和原型</h3>

    <script>
        // 方法：就是函数（可以重复利用的代码块）

        // 定义构造函数
        function Foo(x,y) {
            // 添加属性
            this.x = x;
            this.y = y;
            this.width = "100px";
        }
        // 原型
        // 添加方法（1）
        Foo.prototype.getPos = function() {
            console.log("坐标位置: ("+this.x+","+this.y+")");
        }
         // 添加方法（2）
         Foo.prototype.getTem = function() {
            console.log("当前温度: 30°C ");
        }
        // 添加属性（3） 备注：没有必要在原型上添加属性
        Foo.prototype.width = "200px";

        // 创建构造函数函数的实例
        var o1 = new Foo(100,200);
        var o2 = new Foo(100,200);

        // 实例对象可以使用构造函数的成员(属性和方法)
        o1.getPos();
        o1.getTem();

        // 系统内部创建空对象
        // 程序员可以在空对象中添加属性和方法
        // 最后系统返回该对象

        console.log(o1.getPos === o2.getPos);// true
        console.log(o1.width);// 100px
        // 如果getPos方法和getTem方法是在原型对象上添加的，那就可以起到节省内存的作用(同一引用地址)
        // 以后编写面向对象的代码：
            // 1.0 在构造函数作用域添加属性
            // 2.0 在构造函数的原型上添加方法
            // 3.0 可以让代码更加高效执行



    </script>
</body>
</html>